<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Harmic - My account</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/my-account.js"></script>
    <!-- CSS
    ============================================ -->

    <!-- Vendor CSS (Contain Bootstrap, Icon Fonts) -->
    <!-- <link rel="stylesheet" href="css/vendor/font-awesome.min.css"/> -->
    <!-- <link rel="stylesheet" href="css/vendor/Pe-icon-7-stroke.css"/> -->

    <!-- Plugin CSS (Global Plugins Files) -->
    <!-- <link rel="stylesheet" href="css/plugins/animate.css"> -->
    <!-- <link rel="stylesheet" href="css/plugins/jquery-ui.min.css"> -->
    <!-- <link rel="stylesheet" href="css/plugins/swiper-bundle.min.css"> -->
    <!-- <link rel="stylesheet" href="css/plugins/nice-select.css"> -->
    <!-- <link rel="stylesheet" href="css/plugins/magnific-popup.min.css"/> -->

    <!-- Minify Version -->
    <link rel="stylesheet" href="css/vendor/vendor.min.css">
    <link rel="stylesheet" href="css/plugins/plugins.min.css">

    <!-- Style CSS -->
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <link rel="stylesheet" href="css/style.min.css">

</head>

<body>
<!--insert插入模板会替换div中的数据,include包含模板会替换标签所在的div-->
<div th:include="~{header :: head}"></div>
<input type="hidden" name="email" th:value="${session.user.email}" id="email"/>
<div class="main-wrapper">
    <!-- Begin Main Content Area -->
    <main class="main-content">
        <div class="breadcrumb-area breadcrumb-height" data-bg-image="images/breadcrumb/bg/1-1-1920x373.jpg">
            <div class="container h-100">
                <div class="row h-100">
                    <div class="col-lg-12">
                        <div class="breadcrumb-item">
                            <h2 class="breadcrumb-heading">完善信息</h2>
                            <ul>
                                <li>
                                    <a href="dispatcher?url=index.html">主页<i class="pe-7s-angle-right"></i></a>
                                </li>
                                <li>我的账户</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="account-page-area section-space-y-axis-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <ul class="nav myaccount-tab-trigger" id="account-page-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="account-dashboard-tab" data-bs-toggle="tab"
                                   href="#account-dashboard" role="tab" aria-controls="account-dashboard"
                                   aria-selected="true">基本介绍</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="account-address-tab" data-bs-toggle="tab"
                                   href="#account-address" role="tab" aria-controls="account-address"
                                   aria-selected="false">地址</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="account-details-tab" data-bs-toggle="tab"
                                   href="#account-details" role="tab" aria-controls="account-details"
                                   aria-selected="false">账户信息</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-9">
                        <div class="tab-content myaccount-tab-content" id="account-page-tab-content">
                            <div class="tab-pane fade show active" id="account-dashboard" role="tabpanel"
                                 aria-labelledby="account-dashboard-tab">
                                <div class="myaccount-dashboard">
                                    <p>您好, <b><span id="name_All"></span></b> (是否需要信息完善?)</p>
                                    <p style="color: red">在这里你可以编辑你的基本信息和更改密码,请确保当前网络环境和周边环境安全。</a></p>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="account-address" role="tabpanel"
                                 aria-labelledby="account-address-tab">
                                <div class="myaccount-address">
                                    <p>默认情况下，配送地址将使用以下地址。</p>
                                    <div class="row">
                                        <div class="col">
                                            <h4 class="small-title">完善地址信息</h4>
                                            <address>
                                                完善地址信息为了更方便您的购物,您可以在线一键下单。
                                            </address>
                                        </div>
                                        <div class="col">
                                            <h4 class="small-title">购物地址</h4>
                                            <address>
                                                <span id="addr" style="font-weight: bold"></span>
                                            </address>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="account-details" role="tabpanel"
                                 aria-labelledby="account-details-tab">
                                <div class="myaccount-details">
                                    <form action="updateUserInfo.do" class="myaccount-form" method="post"
                                          name="userInfo">
                                        <div class="myaccount-form-inner">
                                            <div class="single-input single-input-half">
                                                <label>姓:<span style="color: red">*</span></label>
                                                <input type="text" name="firstname" id="fName">
                                            </div>
                                            <div class="single-input single-input-half">
                                                <label>名:<span style="color: red">*</span></label>
                                                <input type="text" name="lastname" id="lName">
                                            </div>
                                            <div class="single-input">
                                                <label>Email:<span style="color: red">*</span></label>
                                                <input type="email" readonly="readonly" name="email" id="emails">
                                            </div>
                                            <div class="single-input">
                                                <label>地址:<span style="color: red">*</span></label>
                                                <input type="text" name="address" id="address">
                                            </div>
                                            <div class="single-input">
                                                <label>当前密码:<span style="color: red">*</span></label>
                                                <input type="text" readonly="readonly"
                                                       id="currentPwd">
                                            </div>

                                            <div class="single-input">
                                                <label>新密码:<span style="color: red">*</span></label>
                                                <input type="password"  id="newPwd">
                                            </div>
                                            <div class="single-input">
                                                <label>确认密码:<span style="color: red">*</span></label>
                                                <input type="password" name="password" id="confirmPwd">
                                            </div>
                                            <div class="single-input">
                                                <button type="button" class="btn btn-custom-size lg-size btn-secondary btn-primary-hover rounded-0" id="btn">
                                                    <span>保存更改</span>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- Main Content Area End Here -->

    <!-- Begin Footer Area -->
    <div class="footer-area" th:include="~{footer :: foot}">
        <div class="footer-top section-space-y-axis-100 text-black" data-bg-color="#e5ddcc">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-6">
                        <div class="widget-item">
                            <div class="footer-logo pb-4">
                                <a href="index.html">
                                    <img src="images/logo/dark.png" alt="Logo">
                                </a>
                            </div>
                            <p class="short-desc mb-2">Lorem ipsum dolor sit amet, consectet adipi elit, sed do eius
                                tempor incididun ut labore gthydolore. </p>
                            <div class="widget-contact-info pb-6">
                                <ul>
                                    <li>
                                        <i class="pe-7s-map-marker"></i>
                                        184 Main Rd E, St Albans VIC 3021,
                                    </li>
                                    <li>
                                        <i class="pe-7s-mail"></i>
                                        <a href="mailto://info@example.com">info@example.com</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="payment-method">
                                <a href="javascript:void(0)">
                                    <img src="images/payment/1.png" alt="Payment Method">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 offset-lg-1 col-md-6 pt-10 pt-lg-0">
                        <div class="widget-item">
                            <h3 class="widget-title mb-5">Information</h3>
                            <ul class="widget-list-item">
                                <li>
                                    <a href="javascript:void(0)">FAQ</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Shipping</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Returns</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Order Status</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Gift Card Balance</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Accessibility</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 offset-lg-1 col-md-6 pt-10 pt-lg-0">
                        <div class="widget-item">
                            <h3 class="widget-title mb-5">My Account</h3>
                            <ul class="widget-list-item">
                                <li>
                                    <a href="javascript:void(0)">My Account</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Checkout</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Validation</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Wishlist</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">Terms of Use</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">FAQ</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 pt-10 pt-lg-0">
                        <div class="widget-item">
                            <h3 class="widget-title mb-5">Newsletters</h3>
                            <p class="short-desc">Lorem ipsum dolor sit amet, consectet adipi elit, sed do eius
                                tempor.</p>
                        </div>
                        <div class="widget-form-area">
                            <form class="widget-form" action="#">
                                <input class="input-field" type="email" autocomplete="off" placeholder="Your Email">
                                <div class="button-wrap pt-5">
                                    <button class="btn btn-custom-size btn-primary btn-secondary-hover rounded-0"
                                            id="mc-submit">Send Mail
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Area End Here -->
    <!-- Begin Scroll To Top -->
    <a class="scroll-to-top" href="">
        <i class="fa fa-chevron-up"></i>
    </a>
    <!-- Scroll To Top End Here -->

</div>

<!-- Global Vendor, plugins JS -->

<!-- JS Files
============================================ -->
<!-- Global Vendor, plugins JS -->

<!-- Vendor JS -->
<!-- <script src="js/vendor/bootstrap.bundle.min.js"></script> -->
<!-- <script src="js/vendor/jquery-3.5.1.min.js"></script> -->
<!-- <script src="js/vendor/jquery-migrate-3.3.0.min.js"></script> -->
<!-- <script src="js/vendor/modernizr-3.11.2.min.js"></script> -->
<!-- <script src="js/vendor/jquery.waypoints.js"></script> -->

<!--Plugins JS-->
<!-- <script src="js/plugins/wow.min.js"></script> -->
<!-- <script src="js/plugins/jquery-ui.min.js"></script> -->
<!-- <script src="js/plugins/swiper-bundle.min.js"></script> -->
<!-- <script src="js/plugins/jquery.nice-select.js"></script> -->
<!-- <script src="js/plugins/parallax.min.js"></script> -->
<!-- <script src="js/plugins/jquery.magnific-popup.min.js"></script> -->

<!-- Minify Version -->
<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>

<!--Main JS (Common Activation Codes)-->
<!-- <script src="js/main.js"></script> -->
<script src="js/main.min.js"></script>

</body>

</html>